// Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import logger from "./Logger";
const Logger = logger;
import Util from "./Util";
import { CLOUD_PHONE_RATIO } from "./config/commonConfig";

const FULLSCREEN_CHANGE = [
  "webkitfullscreenchange",
  "mozfullscreenchange",
  "fullscreenchange",
  "msFullscreenChange",
];

export default class FullScreen {
  constructor(options) {
    this.options = { ...options };
    this.inFullscreenStatus = false;
    this.playerContainerId = null;
    this.fullscreenElementId = null;
    this.fullscreenEle = null;
    this.util = new Util();
  }

  init() {
    FULLSCREEN_CHANGE.forEach((evt) => {
      this.util.bind(document, evt, this.refreshFullState.bind(this));
    });
  }

  enterFullCreen(callback) {
    Logger.debug("enterFullCreen");
    if (!this.fullscreenEle) {
      return;
    }

    const requestMethod =
      this.fullscreenEle.requestFullScreen || // W3C
      this.fullscreenEle.mozRequestFullScreen || // Chrome 等
      this.fullscreenEle.webkitRequestFullScreen || // FireFox
      this.fullscreenEle.msRequestFullScreen; // IE11
    if (requestMethod) {
      requestMethod.call(this.fullscreenEle);
    }
    setTimeout(() => {
      callback();
    }, 250);
  }

  exitFullscreen(callback) {
    Logger.debug("exitFullscreen");
    if (!this.fullscreenEle) {
      return;
    }

    const exitMethod =
      document.exitFullscreen || // W3C
      document.mozCancelFullScreen || // FireFox
      document.webkitExitFullscreen || // Chrome 等
      document.msExitFullscreen; // IE11
    if (exitMethod) {
      exitMethod.call(document);
    }
    setTimeout(() => {
      callback();
    }, 250);
  }

  refreshFullState() {
    if (!this.fullscreenEle) {
      return;
    }

    this.inFullscreenStatus = Boolean(
      document.fullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement
    );
    Logger.debug("inFullscreenStatus = ", this.inFullscreenStatus);

    // 按下F11键进入全屏或退出全屏，不会触发resize事件，强制触发，否则触控点错位
    window.dispatchEvent && window.dispatchEvent(new Event("resize"));

    setTimeout(() => {
      this.updateContainerSize();
    }, 120);
  }

  fullscreenToggle(fullscreenElementId, playerContainerId, isMSE, callback) {
    this.playerContainerId = playerContainerId;
    this.fullscreenElementId = fullscreenElementId;
    this.isMSE = isMSE;

    if (!fullscreenElementId && this.options.autoRotate) {
      Logger.debug(
        "Can not use fullscreenToggle API success, because fullscreenElementId is undefined but auto_rotate is true"
      );
      return;
    }

    Logger.debug("toggle: inFullscreenStatus = ", this.inFullscreenStatus);
    this.fullscreenEle = document.getElementById(fullscreenElementId);
    if (this.inFullscreenStatus) {
      this.exitFullscreen(callback);
    } else {
      this.enterFullCreen(callback);
    }
  }

  isFullscreen() {
    return this.inFullscreenStatus;
  }

  destroy() {
    FULLSCREEN_CHANGE.forEach((evt) => {
      this.util.unbind(document, evt);
    });
  }

  updateCanvasSize(clientWidth, clientHeight) {
    const playContainer = document.getElementById(`${this.playerContainerId}`);
    let canvasElement = playContainer.shadowRoot.querySelector("#playCanvas");
    let playerWidth = clientHeight * CLOUD_PHONE_RATIO;
    let playerHeight = clientHeight;
    if (this.options.isMobile) {
      playerWidth = clientWidth;
      playerHeight = clientHeight;
    }

    canvasElement.width = playerWidth;
    canvasElement.height = playerHeight;
  }

  updateContainerSize() {
    const fullWidth = window.innerWidth;
    const fullHeight = window.innerHeight;
    const containerEle = document.getElementById(this.options.containerId);
    containerEle.style.cssText = `
            width: ${fullWidth};
            height: ${fullHeight};
        `;

    // canvas无法使用百分比设置大小，故全屏和取消全屏需要手动设置宽高
    if (!this.isMSE) {
      this.updateCanvasSize(fullWidth, fullHeight);
    }
  }
}
